import React,{ Component } from 'react';
import { Form, Input, Icon, Button, Spin, message } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import styles from './index.css';
import { md_five as md5 } from '../../../../utils/encry';
import img from '../../../../assets/yay.jpg';
import FormTitle from '../FormTitle';

const FormItem = Form.Item;

class AuthForm extends Component {

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.dispatch({
                    type: 'auth/login',
                    payload: {
                        username: values.username,
                        password: md5(values.password),
                    },
                }).then((res) => {
                    if (res.code === 0) {
                        sessionStorage.setItem('isAuth', 'true');
                        router.push('/oa/home');
                    } else {
                        message.error('用户名或者密码错误...');
                    }
                });
            }
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className={`${this.props.className} ${styles.wrapper}`} style={this.props.style}>
                <Spin spinning={this.props.loading}>
                    <Form className={styles.auth_form} onSubmit={this.handleSubmit}>
                        <FormTitle title={'登录界面'} src={img}/>
                        <img src={img} className={styles.img} alt={'扫码登录'}/>
                        <FormItem hasFeedback>
                            {
                                getFieldDecorator('username', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '用户名不能为空',
                                        }, {
                                            min: 4,
                                            max: 12,
                                            message: '长度必须控制在在4-12范围内',
                                        },
                                    ],
                                })(
                                    <Input placeholder={'用户名'} prefix={<Icon type={'user'}/>}/>,
                                )}
                        </FormItem>
                        <FormItem hasFeedback>
                            {
                                getFieldDecorator('password',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: '密码不能为空',
                                            }, {
                                                min: 6,
                                                max: 16,
                                                message: '密码长度必须控制在6-16范围内'
                                            },
                                        ],
                                    },
                                )(
                                    <Input type={'password'} placeholder={'密码'} prefix={<Icon type={'lock'}/>}/>,
                                )
                            }
                        </FormItem>
                        <Button className={styles.login_button} type={'primary'} htmlType={'submit'}>登录</Button>
                        <Button className={styles.register_button} type={'primary'}
                                onClick={this.props.onClick}>注册</Button>
                    </Form>
                </Spin>
            </div>
        );
    }
}

export default connect(
    ({ loading }) => {
        return {
            loading: !!loading.models.auth
        };
    }
    , null)(Form.create({})(AuthForm));
